<template>
  <div
    v-empty="!retreatReadAuth"
    xs-empty-icon="nopermission"
    xs-empty-text="暂无权限"
    class="detail-tab">
    <flexbox
      align="center"
      justify="flex-end"
      style="margin-bottom: 10px">
      <el-button
        v-if="detailData.state == 3 && retreatSaveAuth"
        type="primary"
        icon="el-icon-plus"
        size="mini"
        class="xr-btn--orange"
        @click="handleCreate('jxc_retreat')">
        新建退货单
      </el-button>
    </flexbox>

    <tab-table
      v-if="showTable && retreatReadAuth"
      :request-config="tabTableReqConfig"
      class="table-list"
      @render-ok="handleTableOk"
      @row-click="handleTableRowClick" />

    <create-com
      v-if="showCreate"
      :type="type"
      :config="createConfig"
      @update="handleRefresh"
      @close="showCreate = false" />

    <j-x-c-full-screen-detail
      v-if="showDetail && rowId && detailType"
      :id="rowId"
      :type="detailType"
      @update="handleRefresh"
      @close="showDetail = false" />
  </div>
</template>

<script>
import {
  jxcFieldDetailOtherFieldListAPI,
  jxcFieldQueryListAPI
} from '@/api/jxc/field'

import CreateCom from '../../../components/Create/CreateCom'
import TabTable from '../../../components/DetailTab/TabTable'
import JxcTypes from '../../../jxcTypes'
import { mapGetters } from 'vuex'

export default {
  name: 'TabReturnedRecord',
  components: {
    TabTable,
    CreateCom,
    JXCFullScreenDetail: () => import('../../../components/JXCFullScreenDetail')
  },
  inheritAttrs: false,
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    detailData: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      showTable: false,

      tabTableReqConfig: {
        fieldParams: {
          label: JxcTypes.jxc_retreat.label,
          otherLable: 6
        },
        fieldRequest: jxcFieldDetailOtherFieldListAPI,
        listParams: {
          label: JxcTypes.jxc_retreat.label,
          searchList: []
        },
        listRequest: jxcFieldQueryListAPI,
        canVisitField: ['orderNumber']
      },

      createConfig: {},
      showCreate: false,
      type: '',

      rowId: null,
      detailType: null,
      showDetail: false
    }
  },
  computed: {
    ...mapGetters(['jxc']),
    retreatReadAuth() {
      return this.jxc && this.jxc.retreat && this.jxc.retreat.read
    },
    retreatSaveAuth() {
      return this.jxc && this.jxc.retreat && this.jxc.retreat.save
    }
  },
  watch: {
    id: {
      handler(val) {
        this.showTable = false
        this.tabTableReqConfig.listParams.searchList = [
          {
            name: 'purchase_id',
            formType: 'text',
            type: 1,
            values: [this.id]
          },
          {
            name: 'state',
            formType: 'text',
            type: 2,
            values: [0]
          }
        ]
        this.tableOk = false
        this.$nextTick(() => {
          this.showTable = true
        })
      },
      immediate: true
    }
  },
  methods: {
    handleTableOk(data) {
      this.tableOk = true
      this.tabTableList = data.data || []
    },

    /**
     * 刷新
     */
    handleRefresh() {
      this.showTable = false
      // this.tableOk = false
      this.$nextTick(() => {
        this.showTable = true
      })
    },

    /**
     * 新建
     */
    handleCreate(type) {
      this.type = type
      this.createConfig = {
        defaultValue: {
          purchaseId: {
            id: this.id,
            name: this.detailData.orderNumber
          },
          supplierId: {
            id: this.detailData.supplierId,
            name: this.detailData.supplierName
          }
        },
        disabledField: ['purchaseId', 'supplierId']
      }
      this.showCreate = true
    },

    handleTableRowClick(row, field) {
      this.rowId = null
      this.detailType = null
      if (field === 'orderNumber') {
        this.rowId = row.retreatId
        this.detailType = 'jxc_retreat'
        this.showDetail = true
      }
    }
  }
}
</script>

<style scoped lang="scss">
  @import "../../../styles/detailTab";

  .table-list {
    margin-top: 10px;
  }
</style>
